<template>
    <div class="record">
        <div class="bottom-content">
            <img class="bottom-back" src="@/assets/下方@3x.png" alt="">
            <ul class="bottomNum">
                <li>
                    <p>167.00</p>
                    <span>工厂数量</span>
                </li>
                <li>
                    <p>28065</p>
                    <span>工人数量</span>
                </li>
                <li>

                </li>
                <li>
                    <p>76,948,279</p>
                    <span>今年总产量</span>
                </li>
                <li>
                    <p>199,791</p>
                    <span>昨日产量</span>
                </li>
            </ul>
        </div>

    </div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
/* 底部数据 */
.record {
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin-top: -100px;

    .bottom-content {
        width: 60%;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;

        .bottom-back {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    .bottomNum {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: end;
        padding: 0 20px;
        box-sizing: border-box;
        margin-left: 30px;
        padding: 0 40px;
        top: -20px;
    }

    .bottomNum>li {
        top: 117px;
        flex: 1;
    }



    .bottomNum p {
        color: white;
        background: -o-linear-gradient(#ffafbd, #ffc3a0);
        font-size: 26px;
        font-weight: 700;
        margin: 0;
        margin-bottom: 10px;
        text-shadow: 0 0 10px #0883e1, 0 0 20px #0883e1, 0 0 30px;
    }

    .bottomNum span {
        margin: 0;
        color: #777e9e;
        padding-left: 15px;

    }
}
</style>